<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/shouye.css">
    <link rel="stylesheet" href="css/bottom.css">
    <script src="./jquery-3.6.0.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
                <!-- 这里需要放置弹出层 -->
                <li class="city">
                    <div>
                        <img src="./img/shouye/定位.svg" alt="">
                        <span id="cityname">福州</span>
                        <span id="choose">[切换城市]</span>
                    </div>
                    <!-- 遮罩层 -->
                    <div id="screen"></div>
                    <!-- 弹出层 -->
                    <section id="login">
                        <p id="title">
                            <span>城市选择</span>
                            <span>切换城市分站。寻找当地心仪工作</span>
                            <span class="yincang">X</span>
                        </p>
                        <div class="top">
                            <span>亲爱的用户您好：</span>
                            <span>切换城市分站，让我们为您提供更准确的信息</span>
                            <hr>
                        </div>

                        <div class="center1">
                            <span>当前定位：</span>
                            <span>北京站</span>
                            <p>点击返回<span>"全国站"</span> 或切换到以下城市</p>
                        </div>
                        <div class="content">
                            <ul class="one">
                                <!-- <li>全国站</li>
                                <li>北京站</li>
                                <li>全国站</li>
                                <li>北京站</li> -->

                            </ul>

                        </div>
                        <p id="other">其他分站开通中，尽请期待~</p>

                    </section>
                </li>
                <!-- -------------------------------- -->
            </div>

            <div class="center">
                <li id="shouye" id="now"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span>职位</span></a></li>
                <li id="campus"><a href="./campus.html"><span>校园</span></a></li>
                <li id="turtle"><a href="./turtle.html"><span>海归</span></a></li>
                <li id="company"><a href="./company.html"><span>公司</span></a></li>
                <li id="app"><a href="./APP.html"><span>APP</span></a></li>
                <li id="news"><a href="./zixun.html"><span>资讯</span></a></li>
                <li id="find"><a href=""><span>发现</span></a></li>
                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span>百科</span></a></li>

            </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href=""><span>上传简历</span></a></li>
                <li><a href=""><span>我要找工作</span></a></li>
                <li><a href=""><span>我要招聘</span></a></li>
                <li><a href=""><input type="button" value="注册"></a></li>
                <li><a href=""><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

    <!-- nav 下面的一小部分 -->
    <div id="img">
        <div class="left">
            <img src="./img/shouye/fast-reg.png" alt="">
        </div>
        <div class="right">

            <div>
                <img src="./img/shouye/fast-reg-text.png" alt="">
                <input type="text" placeholder="输入手机号">
                <input type="text" placeholder="验证码                 获取" name="" id="">
                <input type="submit" value="登录/注册">
            </div>

        </div>
    </div>
    <!-- 职位类型  搜索框 -->
    <div id="search1">
        <div>
            <span>职位类型：</span>
            <input type="text" value="" placeholder=" 搜索职位、公司">
            <button>搜索</button>
        </div>
        <p>
            <span>热门职位：</span>
            <span>采购专员/助理</span>
            <span>咖啡师</span>
            <span>机器学习</span>
            <span>运营经理/主管</span>
            <span>课程顾问</span>
            <span>英语教师</span>
            <span>资讯项目管理</span>
            <span>剪辑师</span>
        </p>
    </div>

    <!-- 设置核心内容 -->

    <!-- 下面的技术类+图片 -->
    <section id="main">
        <div class="home-box">
            <div class="home-sider">
                <!-- 左侧职位选择 -->
                <div class="job-menu">
                    <!-- 技术  第一个 -->
                    <dl dl-index="0">
                        <dd>
                            <!-- 放置右侧的 > -->
                            <b>技术</b>
                            <span>java</span>
                            <span>PHP</span>
                            <span>web前端</span>
                            <span>算法工程师</span>
                            <i>&gt;</i>
                        </dd>
                        <!-- 放鼠标滑上去显示的东西 -->
                        <div class="menu-sub">
                            <!-- <p>技术 {{zpData.name}}</p>
                            <ul>
                                <li>
                                    <h4>后端开发{{zpData.subLevelModelList.name}}</h4>
                                    <div>
                                    <span>java{{zpData.subLevelModelList.subLevelModelList[value.name]}}</span>
                         
                                    </div>
                                </li>    
                            </ul> -->
                        </div>
                    </dl>
                    <!-- 产品  第二个 -->
                    <dl dl-index="1">
                        <dd>
                            <!-- 放置右侧的 > -->
                            <b>产品</b>
                            <span>产品经理</span>
                            <span>产品总监</span>
                            <span>数据产品经理</span>
                            <i>&gt;</i>
                        </dd>
                        <!-- 放鼠标滑上去显示的东西 -->
                        <div class="menu-sub">

                        </div>
                    </dl>
                    <!-- 设计  第三个 -->
                    <dl dl-index="2">
                        <dd>
                            <!-- 放置右侧的 > -->
                            <b>设计</b>
                            <span>UI设计师</span>
                            <span>平面设计</span>
                            <span>交互设计师</span>
                            <i>&gt;</i>
                        </dd>
                        <!-- 放鼠标滑上去显示的东西 -->
                        <div class="menu-sub">

                        </div>
                    </dl>
                    <!-- 运营  第四个 -->
                    <dl dl-index="3">
                        <dd>
                            <!-- 放置右侧的 > -->
                            <b>运营</b>
                            <span>新媒体运营</span>
                            <span>产品运营</span>
                            <span>网络推广</span>
                            <i>&gt;</i>
                        </dd>
                        <!-- 放鼠标滑上去显示的东西 -->
                        <div class="menu-sub">


                        </div>
                    </dl>
                    <!-- 市场 第五个 -->
                    <dl dl-index="4">
                        <dd>
                            <!-- 放置右侧的 > -->
                            <b>市场营销</b>
                            <span>市场推广</span>
                            <span>品牌公关</span>
                            <span>策划经理</span>
                            <i>&gt;</i>
                        </dd>
                        <!-- 放鼠标滑上去显示的东西 -->
                        <div class="menu-sub">
                            <!-- <p>技术</p> -->

                        </div>
                    </dl>
                    <!-- 人事  第六个 -->
                    <dl dl-index="5">
                        <dd>
                            <!-- 放置右侧的 > -->
                            <b>人事/财务/行政</b>
                            <span>人力资源专员/助理</span>
                            <span>行政主管</span>
                            <i>&gt;</i>
                        </dd>
                        <!-- 放鼠标滑上去显示的东西 -->
                        <div class="menu-sub">
                            <!-- <p>人事/财务/行政</p> -->

                        </div>
                    </dl>
                    <!-- 高级管理  第七个-->
                    <dl dl-index="6">
                        <dd>
                            <!-- 放置右侧的 > -->
                            <b>高级管理</b>
                            <span>总裁/总经理/CEO</span>
                            <span>分公司/代表处负责人</span>
                            <i>&gt;</i>
                        </dd>
                        <!-- 放鼠标滑上去显示的东西 -->
                        <div class="menu-sub">


                        </div>
                    </dl>
                    <!-- 点击显示所有职位 -->
                    <div class="show-all">显示全部职位</div>
                    <!-- 剩余未显示的职位 -->
                    <div class="all-box" style="display: none;">
                        <!-- 里面全部是dl -->
                        <dl>
                            <dd>
                                <!-- 放置右侧的 > -->
                                <i></i>
                                <b>技术</b>
                                <span>java</span>
                                <span>PHP</span>
                                <span>web前端</span>
                                <span>算法工程师</span>
                            </dd>
                            <!-- 放鼠标滑上去显示的东西 -->
                            <div class="menu-sub">

                            </div>
                        </dl>
                    </div>
                </div>
                <!-- 右侧图片显示 -->
                <div class="main-right">
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="2" colspan="2">
                                    <img src="./img/shouye/left1.jpg" alt="">
                                </td>
                                <td>
                                    <img src="./img/shouye/righ1.jpg" alt="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="./img/shouye/righ2.jpg" alt="">
                                </td>
                            </tr>
                            <tr>
                                <td rowspan="1" colspan="2">
                                    <img src="./img/shouye/left2.jpg" alt="">
                                </td>
                                <td>
                                    <img src="./img/shouye/righ3.jpg" alt="">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>

        </div>

    </section>

    <!-- ------------热招职位-------------- -->
    <main id="main-content">
        <!-- 热招职位 -->
        <div class="box-title">
            热招职位
        </div>
        <h3>
            <span class="cur" data-index="0">IT·互联网</span>
            <span data-index="1">金融</span>
            <span data-index="2">房地产·金融</span>
            <span data-index="3">教育培训</span>
            <span data-index="4">娱乐传媒</span>
            <span data-index="5">医疗健康</span>
            <span data-index="6">法律资讯</span>
            <span data-index="7">供应链</span>
            <span data-index="8">采购贸易</span>
        </h3>
        <!-- 放置具体职位 -->
        <ul>
            <!-- <li>
                <div class="div-one">
                    <div class="div-top">
                        <p>运维技术专家
                            <img src="./img/shouye/信息图标.svg" alt="">
                        </p>
                        <p>25-50K·薪资</p>
                    </div>
                    <p>
                        <span>上海</span>
                        <span class="vline"></span>
                        <span>5-10年</span>
                        <span class="vline"></span>
                        <span>本科</span>
                    </p>
                </div>
                <div class="div-two">
                    <span><img src="./img/shouye/公司logo22.svg" alt=""></span>
                    <span>XTransfer</span>
                    <span>互联网金融</span>
                    <span class="vline"></span>
                    <span>D轮及以上</span>
                </div>
            </li> -->
        </ul>
    </main>
    <!-- 查看更多   直接跳转到职位页面 -->
    <div class="job-more">
        <a href="./job.html"> 查看更多</a>
    </div>

    <!-- 热门集团 -->
    <main id="main-content1">
        <!-- 热招职位 -->
        <div class="box-title1">
            热门企业
        </div>
        <!-- 放置具体职位 -->
        <!-- 一排三个ul   一个ul是一个公司
            ul里三个li 每个li是一个职位
         -->
        <!-- #main-content1 .hot-firm -->

        <section>
            <!-- 一个ul是一个公司 -->
            <!-- <ul> -->

            <!-- <div class="hot-firm">
                    拼接str z只拼接公司部分
                    <img src="./img/shouye/公司logo22.svg" alt="">
                    <div class="hot-content">
                        <p>携程集团</p>
                        <p>
                            <span>已上市</span>
                            <span class="vline"></span>
                            <span>10000人以上</span>
                            <span class="vline"></span>
                            <span>互联网</span>
                        </p>
                    </div>
                </div>
                每个公司具体岗位
                <li>
                    <div class="div-one">
                        <div class="div-top">
                            <p>直播运营
                                <img src="./img/shouye/信息图标.svg" alt="">
                            </p>
                            <p>25-50K·薪</p>
                        </div>
                        <p>
                            <span>上海</span>
                            <span>5-10年</span>
                            <span>本科</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="div-one">
                        <div class="div-top">
                            <p>vcc商务经理
                                <img src="./img/shouye/信息图标.svg" alt="">
                            </p>
                            <p>25-50K·薪</p>
                        </div>
                        <p>
                            <span>上海</span>
                            <span>5-10年</span>
                            <span>本科</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="div-one">
                        <div class="div-top">
                            <p>编导策划
                                <img src="./img/shouye/信息图标.svg" alt="">
                            </p>
                            <p>25-50K·薪</p>
                        </div>
                        <p>
                            <span>上海 长宁区 北新泾</span>
                            <span>1-2年</span>
                            <span>本科</span>
                        </p>
                    </div>
                </li>
                <div class="job-more">
                    <a href="./job.html"> 查看更多职位</a>
                </div>
               -->
            <!-- </ul>      -->
        </section>



    </main>

    <div class="footer">
        <div class="footer-inner">
            <div class="inner-top">
                <ul class="one">
                    <li id="first">企业服务</li>
                    <li>职位搜索</li>
                    <li>新闻资讯</li>
                    <li>BOSS直聘APP</li>
                    <li>投资者关系</li>
                </ul>
                <ul class="one">
                    <li id="first">使用与帮助</li>
                    <li>协议与规则</li>
                    <li>个人信息保护政策</li>
                    <li>防骗指南</li>
                    <li>使用帮助</li>
                </ul>
                <ul class="one">
                    <li id="first">练习BOSS直聘</li>
                    <li>北京华品博睿网络技术有限公司</li>
                    <li>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</li>
                    <li>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</li>

                </ul>
                <ul class="one">
                    <li id="first">
                        <img src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png" alt="">
                    </li>
                    <li>企业服务热线和举报投诉/未成年人举报渠道 </li>
                    <li>公司地址 老年人直连热线</li>
                    <li>工作日 8:00 - 22:00</li>
                    <li>休息日 9:30 - 18:30</li>
                </ul>
            </div>
            <div class="inner-bottom">
                <div class="left">
                    <div class="inner-bottom-left">
                        <span>Copyright © 2022 BOSS直聘</span>
                        <span>京ICP备14013441号-5</span>
                        <span>京ICP证150923号</span>
                        <span>京网文[2020]0399-066 号</span>
                        <span> <img src="	https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt="">
                            电子营业执照</span>
                        <span><img src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt="">
                            京公网安备11010502032801</span>
                    </div>
                    <div class="inner-bottom-right">
                        <span>朝阳警力</span>
                        <span>人力资源服务许可证</span>
                        <span>网上有害信息举报专区</span>
                        <span>朝阳区人社局监督电话</span>
                    </div>
                </div>
                <div class="right">
                    <a href="https://www.weibo.com/bosszhipin" target="_blank" class="weibo">
                        <img src="./img/turtle/微博.svg" alt="">
                    </a>
                    <a href="#" class="weixin">
                        <img src="./img/turtle/微信.svg" alt="">
                    </a>
                    <a href="#" class="app">
                        <img src="./img/turtle/app.svg" alt="">
                    </a>
                    <a href="" class="icon-client-app">
                        <img src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <p>
            <span>友情链接</span>
            <span>看准网</span>
        </p>
    </div>
    <!-- 右边的小图标 -->
    <div id="right-img">
        <ul>
            <li><em></em></li>
            <li><em></em></li>
            <li><em></em></li>
            <li><em></em></li>
            <li class="btn"><em></em></li>
        </ul>
    </div>

    <!-- 弹出部分 的样式 -->
    <div class="tanchutop">
        <div class="top-search">
            <div class="logo">
                <img src="https://static.zhipin.com/zhipin-geek/v490/web/geek/images/logo-2x.png" alt="">
            </div>
            <div class="top-center">
                <span>职位类型:</span>
                <input type="text" placeholder="搜索职位、公司">
                <button>搜索</button>
            </div>

            <div class="top-right">
                <input type="text" name="" id="" placeholder="输入手机号">
                <input type="text" placeholder="验证码        获取">
                <button>登录注册</button>
            </div>
        </div>

    </div>
    <script>

        // 当点击到向上的图标时，直接让距离屏幕顶部的距离为0 
        $('#right-img .btn').click(function () {
            $(document).scrollTop(0)
        })

        // 监听屏幕滚动到一定位置的时候，出现顶部 固定样式
        window.addEventListener('scroll', function () {
            // console.log(document.documentElement.scrollTop);
            var num = document.documentElement.scrollTop / 100
            var num1 = Math.ceil(num)
            if (num1 >= 2) {
                $('.tanchutop').show().css({
                    position: 'fixed',
                    top: '0'
                })
            } else if (num1 < 2) {
                $('.tanchutop').hide()
            }
        })


        // -------------点击切换城市部分--弹出层-----------------------------------------------

        $('.city #choose').click(() => {
            $('#screen').fadeIn(500).css({

                position: "fixed",
                top: 0,

            });
            $('#login').fadeIn(500).css({

                position: "fixed",
                top: 0
            });
            console.log(111);
            document.documentElement.style.overflow = 'scroll'
            // ajax获取数据 渲染
            // 注意文件夹路径问题  同级 最前面不加/
            // console.log(3333);
            let str = ''
            $.ajax({
                type: 'get',
                url: '/getCity',
                dataType: 'json'
            }).done((data) => {
                // console.log(222);
                // console.log(data);
                // console.log(data.zpData.hotCityList[0].name);
                let city = data.zpData.hotCityList
                console.log(city);

                city.forEach((item, index) => {
                    console.log(item);
                    // console.log(index);
                    str += `
                        <li  data-index=${index}>${item.name}</li>
                    `
                });
                console.log(str);
                $('.city #login .content .one').html(str)

                console.log($('#login .center1 span').eq(1));

                $('.one').on('click', 'li', function () {
                    console.log($(this).index());
                    let i = $(this).index()
                    $('#login .center1 span').eq(1).text(city[i].name)

                    $('.city #cityname').text(city[i].name)
                })


            }).fail((err) => {
                console.log(err);
            })
        })


        // 点击X号隐藏
        $('#login p .yincang').click(() => {
            $('#screen').hide()
            $('#login').hide()
            document.documentElement.style.overflow = 'scroll'

        })

        $('.center1 ').on('mouseover', 'span', function () {
            $('.center1 span').eq(1).css({
                cursor: "pointer",
                border: "1px solid #5dd5c8",
                color: "#5dd5c8"
            })
        })
        $('.center1 ').on('mouseout', 'span', function () {

            $('.center1 span').eq(1).css({
                cursor: "none",
                border: "1px solid gray",
                color: "gray"
            })
        })

        $('.content .one').on('mouseover', 'li', function () {

            console.log($(this).index());
            let i = $(this).index()
            $('.one>li').eq(i).css({
                cursor: "pointer",
                backgroundColor: "#5dd5c8"
            })
        })
        $('.content').on('mouseout', ' .one', () => {
            $('.one li').css({
                cursor: "none",
                backgroundColor: "white"
            })
        })
        // -------------点击切换城市部分结束-------------------------------------------------

        /*-----------------职位信息  鼠标移动上去出现隐藏部分的-------------------------------------------*/

        /*^^^^^鼠标移动到每一个dl标签 上  显示dl  里div 里的p  ul 内容  并读取数据渲染上去^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
        // 需要事先把每个dl  加上索引值
        // console.log($('dl').length);
        // 获取dl  标签的自定义属性
        // console.log($('dl').eq(2).attr("dl-index"));
        $('dl').mouseenter(function () {
            var index = $(this).attr("dl-index")
            // console.log(index);
            // 获取鼠标移到某个上面的索引值
            // console.log($(this).attr("dl-index"));
            $('.job-menu').on('mouseover', 'dl', function () {
                // $('.menu-sub').show();
                // dl 的父类 》menu-sub
                $('dl').eq($(this).attr("dl-index"))
                // console.log($('dl').eq($(this).attr("dl-index")));
                // console.log($(this).attr("dl-index"));
                // console.log($('dl').eq($(this).attr("dl-index")).children('.menu-sub'));
                // .children('.menu-sub').show();
                $('dl').eq($(this).attr("dl-index")).children('.menu-sub').show()
                /*--------对齐隐藏部分内容进行渲染--- 有时间再渲染无时间直接写死数据--*/
                // $(window).ready(function () {
                let str = ''
                let str2 = ''
                $.ajax({
                    type: "get",
                    url: "/getPosition",
                    dataType: "json"
                }).done((data) => {
                    let div = data.zpData

                    // console.log(div[0]);
                    // console.log($(this).attr("dl-index"));
                    div.forEach((item, i) => {
                        if ($(this).attr("dl-index") == i) {
                            str += `
                            <p >${item.name}                               
                            </p>                           
                            `
                            str += `<ul > `
                            div[i].subLevelModelList.forEach((item, j) => {
                                str += `
                                    <li>
                                        <div id="h4">${item.name}</div>
                                        <div id="ul-div">          
                            `
                                item.subLevelModelList.forEach((item, x) => {
                                    str += `
                                        <span>${item.name}</span>  
                                `
                                });
                                str += `
                                        </div>
                                    </li>                           
                                        `
                            });
                            str+=`  </ul>  `
                        }

                    });
                    $('.menu-sub').html(str)
                })
            })
            $('.job-menu ').on('mouseleave', 'dl', function () {
                $('.menu-sub').hide();
                // console.log("hide");
            })

        })



        /*---------------渲染首页的热门职位  下面的第一个 job部分------------------------------*/

        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getJob',
                dataType: 'json'
            }).done((data) => {

                // console.log(data);
                let city = data.job.jobList1
                // console.log(city);

                city.forEach((item, index) => {
                    // console.log(item);
                    // console.log(index);
                    str += `
                    <li data-index=''>
                        <div class="div-one">
                            <div class="div-top">
                                <p>${item.jobName}
                                    <img src="./img/shouye/信息图标.svg" alt="">
                                </p>
                                <p>${item.money}</p>
                            </div>
                            <p>
                                <span>${item.city}</span>
                                <span class="vline"></span>
                                <span>${item.jobTime}</span>
                                <span class="vline"></span>
                                <span>${item.shoolLevel}</span>
                            </p>
                        </div>
                        <div class="div-two">
                            <span><img src="./img/shouye/公司logo22.svg" alt=""></span>
                            <span>${item.XF}</span>
                            <span>${item.trade}</span>
                            <span class="vline"></span>
                            <span>${item.level}</span>
                        </div>
                    </li> 
                    `
                });
                // console.log(str);
                $('#main-content ul').html(str)

            }).fail((err) => {
                console.log(err);
            })
        })


        // 热招职位部分  -----点击金融  
        $('#main-content h3 span').click(function () {
            console.log($(this).attr('data-index'));
            // siblings()所有同级
            $(this).addClass('cur').siblings().removeClass('cur')
            $('#main-content>ul').empty('')
            // let str = ''

            $.ajax({
                type: 'get',
                url: '/getJob',
                dataType: 'json'
            }).done((data) => {
                let city = data.job
                let str = '';

                if ($(this).attr('data-index') == 0) {
                    city.jobList1.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 1)) {
                    city.jobList2.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 2)) {
                    city.jobList3.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 3)) {
                    city.jobList4.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 4)) {
                    city.jobList5.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 5)) {
                    city.jobList6.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 6)) {
                    city.jobList7.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 7)) {
                    city.jobList8.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                } else if (($(this).attr('data-index') == 8)) {
                    city.jobList9.forEach((item, index) => {
                        str += functionData(item, index)
                    });
                    // console.log(str);
                    $('#main-content ul').html(str)
                }


            })
        })
        /*-------------渲染热门企业下面的职位--------------------------*/

        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getCompanyJob',
                dataType: 'json'
            }).done((data) => {

                // console.log(data);
                // data.job 得到的是每个公司的数据
                // console.log(data.job);
                // 得到公司名称
                // console.log(data.job[0].companyName);
                // 第一个公司的岗位信息
                // console.log(data.job[0].jobList);
                let city = data.job

                let str = ''
                // let str1 = ''
                city.forEach((value, index) => {
                    // console.log(value);
                    // 输出具体公司名称
                    // console.log(value.companyName);
                    $('#main-content1 section').append('<ul></ul>')
                    str += `  
                    <div class="hot-firm">
                            <img src="./img/shouye/公司logo22.svg" alt="">
                            <div class="hot-content">
                                <p>${value.companyName}</p>
                                <p >
                                    <span>${value.companyLevel}</span>
                                    <span class="vline"></span>
                                    <span>${value.people}</span>
                                    <span class="vline"></span>
                                    <span>${value.sort}</span>
                                </p>
                            </div>
                    </div>
                   
                    `
                    value.jobList.forEach((item, i) => {
                        str += `
                            <!-- 每个公司具体岗位 -->
                                <li>
                                    <div class="div-one">
                                        <div class="div-top">
                                            <p>${item.jobName}
                                                <img src="./img/shouye/信息图标.svg" alt="">
                                            </p>
                                            <p>${item.money}</p>
                                        </div>
                                        <p>
                                            <span>${item.city}</span>
                                            <span>${item.jobTime}</span>
                                            <span>${item.shoolLevel}</span>
                                        </p>
                                    </div>
                                </li>       
                                  
                        `
                    })
                    $(' #main-content1 section ').find('ul').eq(index).html(str)
                    // console.log(str);
                })
                $(' #main-content1 section  ul').html(str)
                // console.log(str);
            }).fail((err) => {
                console.log(err);
            })
        })


        function functionData(item, index) {
            const str = `
                    <li data-index=''>
                        <div class="div-one">
                            <div class="div-top">
                                <p>${item.jobName}
                                    <img src="./img/shouye/信息图标.svg" alt="">
                                </p>
                                <p>${item.money}</p>
                            </div>
                            <p>
                                <span>${item.city}</span>
                                <span class="vline"></span>
                                <span>${item.jobTime}</span>
                                <span class="vline"></span>
                                <span>${item.shoolLevel}</span>
                            </p>
                        </div>
                        <div class="div-two">
                            <span><img src="./img/shouye/公司logo22.svg" alt=""></span>
                            <span>${item.XF}</span>
                            <span>${item.trade}</span>
                            <span class="vline"></span>
                            <span>${item.level}</span>
                        </div>
                    </li> 
                    `

            return str
        }
    </script>
</body>


<!-- 
<div class="menu-sub">
      <p>技术 {{div.name}}</p>
      <ul>
          <li>
              <h4>后端开发{{zpData.subLevelModelList.name}}</h4>
              <div>
                 
                  <span>java{{zpData.subLevelModelList.subLevelModelList[value.name]}}</span>

              </div>
          </li>    
      </ul>
    //     </div>

    // --------------------------------------------------------------
    // console.log(data.zpData[index].name);
    // console.log(data.zpData[index].subLevelModelList[index].name);
    // console.log(data.zpData[index].subLevelModelList[index].subLevelModelList);
    // 先让ul  存在   添加li
    // （1）---加h4标签  data.zpData[index].subLevelModelList.name 
    // （2）---加div 
    // （3）---div里加span    data.zpData[index].subLevelModelList.subLevelModelList   数组里的.name

    // data.zpData[index].subLevelModelList.forEach((item, x) => {

    //     str += `
    //     <h4>${item.name}</h4>
    //     <div>

    //     </div>
    // `
    // })

    // data.zpData[index].subLevelModelList[index].subLevelModelList.forEach((item, i) => {

    //     str2 += `
    //     <span>
      ${item.name}
    //     </span>
    // `
    // })

    // $('.menu-sub ul ').html(str)
    // $('.menu-sub ul ').find('div').html(str2)

    // // index  全局变量  然后div[index]取name的值（技术--- .menu-sub  里的p标签）
    // //  h4:   data.zpData[index].subLevelModelList.name 
    // //  div:   一堆span  
    // //   span  : data.zpData[index].subLevelModelList.subLevelModelList   数组里的.name

    
 -->
</html>

